<template>
	<view class="activity">
		<!-- #ifdef MP -->
		<view :style="{ height: mpbarheight + 'px', backgroundColor: '#FFD101' }"></view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar" ><view class="top_view" style="background-color:#FFD101;"></view></view>
		<!-- #endif -->
		<view class="topheader">
			<!-- 活动弹窗 -->
			<view class="popmainbox">
				<u-popup
					v-model="popupshow"
					:scrolly="false"
					:safe-area-inset-bottom="true"
					:closeable="true"
					mode="center"
					border-radius="10"
					width="620"
					height="700"
					@close="popclose"
					@open="popopen"
					:negative-top="380"
				>
					<view class="popbox" @touchmove.stop.prevent="moveHandle">
						<text class="title">申请活动</text>
						<view class="drodownbox">
							<u-button @click="selectshow = true" :custom-style="selectbtnsty">
								<text class="u-line-1">{{ addform.title }}</text>
							</u-button>
						</view>
						<view class="popiptbox">
							<u-input
								v-model="addform.min_mum"
								:clearable="false"
								:custom-style="{ backgroundColor: '#FFFFFF' }"
								:height="60"
								type="number"
								focus
								border-color="#ffffff"
								:border="true"
								class="u-m-r-10"
								placeholder="最低销量"
							/>
							<u-input
								v-model="addform.min_server"
								:custom-style="{ backgroundColor: '#FFFFFF' }"
								:clearable="false"
								:height="60"
								type="number"
								border-color="#ffffff"
								:border="true"
								placeholder="最低服务费"
							/>
						</view>
						<view class="timer">
							<u-button :hair-line="false" :custom-style="{ width: '550rpx', height: '58rpx', borderColor: '#ffffff' }" @click="timeshow = !timeshow">
								截止日期: {{ addform.end_time }}
							</u-button>
						</view>
						<view class="callus">
							<u-button @click="selectusershow = true" :custom-style="{ height: '60rpx', borderColor: '#ffffff' }" class="u-m-r-10">
								<text class="u-line-1" style="width: 195rpx;">{{ addform.union }}</text>
							</u-button>
							<u-input
								v-model="addform.wangwang"
								:clearable="false"
								:height="60"
								:custom-style="{ height: '60rpx', backgroundColor: '#FFFFFF' }"
								type="text"
								border-color="#ffffff"
								:border="true"
								placeholder="联系旺旺"
							/>
						</view>
						<view class="choosetype">
							<u-radio-group v-model="addform.type" width="240rpx">
								<u-radio :name="6">普通招商</u-radio>
								<u-radio :name="11">内容招商</u-radio>
							</u-radio-group>
						</view>
						<view class="footerbtn">
							<u-button
								:hair-line="false"
								:custom-style="{
									width: '550rpx',
									height: '74rpx',
									backgroundColor: '#FFDB28',
									border: 'none'
								}"
								@click="doaddactivity"
							>
								提 交 申 请
							</u-button>
						</view>
					</view>
				</u-popup>
				<u-popup
					v-model="urlshow"
					:scrolly="false"
					:safe-area-inset-bottom="true"
					:closeable="true"
					mode="center"
					border-radius="10"
					width="620"
					height="250"
					:negative-top="380"
				>
					<view class="popbox" @touchmove.stop.prevent="moveHandle">
						<text class="title">提示</text>
						<view style="height: 146rpx; padding: 38rpx 0 0 44rpx;">
							<view class="u-flex u-col-center" >
								<u-icon name="checkmark-circle-fill" :size="62" color="#FFD101"></u-icon>
								<text style="font-size: 36rpx; padding-left: 42rpx;">活动链接复制成功</text>
							</view>
						</view>
					</view>
				</u-popup>
				<u-select
					@click="selectshow = true"
					value-name="id"
					label-name="title"
					:searchiptsty="iptsty"
					:isiptshow="true"
					:mode="mode"
					v-model="selectshow"
					:list="selectlist"
					@confirm="confirm"
				></u-select>
				<u-select
					@click="selectusershow = true"
					value-name="id"
					label-name="cpName"
					:searchiptsty="iptsty"
					:isiptshow="true"
					:mode="mode"
					v-model="selectusershow"
					:list="selectuserlist"
					@confirm="confirm2"
				></u-select>
			</view>
			<!-- 日历弹窗 -->
			<u-calendar v-model="timeshow" mode="date" @change="timechange" :max-date="maxdate" :min-date="mindate"></u-calendar>
			<view class="search">
				<u-input
					v-model="search"
					type="text"
					:border="false"
					placeholder="输入活动ID/标题 搜索"
					:clearable="false"
					:custom-style="{
						width: '536rpx',
						height: '68rpx',
						backgroundColor: '#FFFFFF',
						borderRadius: '16rpx',
						textIndent: '16rpx'
					}"
				/>
				<text class="iconfont icon-search" style="font-size: 48rpx;" @click="getActList"></text>
				<u-icon name="plus" :size="48" @click="popupshow = true"></u-icon>
			</view>

			<view class="subsectbox">
				<u-subsection
					:list="typeList"
					active-color="#101010"
					inactive-color="#101010"
					:font-size="36"
					:height="72"
					:bold="true"
					bgColor="#FFD101"
					buttonColor="#FFD101"
					:animation="false"
					@change="actTypeChange"
				></u-subsection>
				<view
					class="active"
					:style="{
						top: '40rpx',
						left: actType == 1 ? '146rpx' : '488rpx'
					}"
				></view>
			</view>
		</view>
		<view class="activityul">
			<block v-for="(v, k) in activityList" :key="k">
				<view class="activityli">
					<view class="actleft" @click="copyActData(v.eventId)">
						<view class="act_top u-line-1" style="font-size: 32rpx;color: #FFD16C;">{{ v.cpName }}</view>
						<view class="act_other">活动ID {{ v.eventId }}</view>
						<view class="act_other">
							报名商品
							<text style="padding-left: 8rpx;color: #EE261B;">{{ v.type }}</text>
						</view>
						<view class="act_other">
							服务费率
							<text style="padding-left: 8rpx;color: #EE261B;">{{ v.serviceRate }}%</text>
						</view>
					</view>
					<view class="actright" @click="goaudit(v.eventId)">
						<view class="act_top u-line-1">{{ v.title }}</view>
						<view class="act_other">{{ v.saveTime }} 至 {{ v.endTime }}</view>
						<view class="act_other">
							总付款金额
							<text style="padding-left: 8rpx;color: #EE261B;">￥{{ v.price }}</text>
						</view>
						<view class="act_other">
							预估服务费
							<text style="padding-left: 8rpx;color: #EE261B;">￥{{ v.serviceFee }}</text>
						</view>
					</view>
				</view>
			</block>
		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import uniCopy from '@/js_sdk/xb-copy/uni-copy.js';
export default {
	name: 'activity',
	data() {
		return {
			urlshow: false,
			timeshow: false,
			mpbarheight: this.statusBarHeight,
			search: '',
			actType: 1,
			popupshow: false,
			selectshow: false,
			selectusershow: false,
			mode: 'single-column', // single-column, mutil-column, mutil-column-auto
			iptsty: {
				width: '100%'
			},
			typeList: [
				{
					name: '公用活动'
				},
				{
					name: '我的活动'
				}
			],
			addform: {
				title: '请选择活动标题',
				title_id: '',
				min_mum: '',
				end_time: '--',
				union_id: '',
				union: '请选择团队',
				wangwang: '',
				type: 6,
				min_server: ''
			},
			activityList: [],
			selectlist: [],
			selectuserlist: [],
			selectbtnsty: {
				width: '550rpx',
				height: '80rpx',
				borderRadius: '12rpx',
				border: 'none'
			},
			maxdate: '',
			mindate: ''
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {},
	//挂载开始之前被调用
	beforeMount() {},
	// onPullDownRefresh() {
	//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
	// console.log('refresh');
	// setTimeout(function() {
	// 	uni.stopPullDownRefresh(); //停止下拉刷新动画
	// }, 1000);
	// },
	//初次渲染完成
	onReady() {
		this.maxdate = this.$u.timeFormat(new Date().getTime() + 30 * 3600 * 24 * 1000, 'yyyy-mm-dd');
		this.mindate = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
		this.getActList();
		this.getactivityinfo();
		this.getunionuser();
	},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		timechange(e) {
			// console.log(e);
			// this.addform.end_time = e.year+'-'+e.month + '-' + e.day;
			this.addform.end_time = e.result;
		},
		goaudit(id) {
			console.log(id)		
			uni.navigateTo({
				url: './actGoods?id=' + id,
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		//复制活动链接
		copyActData(eventId) {
			uniCopy({
				content: 'ad.alimama.com/zhaoshang/cpevent/index.htm?srcCode=1&keyword=' + eventId,
				success: res => {
					this.urlshow = true;
					// uni.showToast({
					// 	title: res,
					// 	icon: 'none'
					// });
				},
				error: e => {
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 3000
					});
				}
			});
		},
		// 申请活动
		doaddactivity() {
			if (
				this.addform.title_id !== '' &&
				this.addform.min_mum !== '' &&
				this.addform.union_id !== '' &&
				this.addform.wangwang !== '' &&
				this.addform.min_server !== '' &&
				this.addform.end_time !== '--'
			) {
				this.$u.api
					.doaddactivity(this.addform)
					.then(res => {
						console.log(res);
						if (res.code == 200) {
							this.$refs.uToast.show({
								title: '申请成功!',
								type: 'success'
							});
							this.closeadd();
							this.getActList();
						}
					})
					.catch(err => {
						console.log(err);
						this.$refs.uToast.show({
							title: err.msg,
							type: 'error'
						});
					});
			} else {
				this.$refs.uToast.show({
					title: '请检查申请内容!',
					type: 'warning'
				});
			}
		},
		//选择活动标题确认
		confirm(e) {
			this.addform.title = e[0].label;
			this.addform.title_id = e[0].value;
		},
		//选择团队标题确认
		confirm2(e) {
			this.addform.union = e[0].label;
			this.addform.union_id = e[0].value;
		},
		//打开申请活动弹窗
		openadd() {
			this.popupshow = true;
		},
		popclose() {
			this.popupshow = false;
		},
		popopen() {
			this.popupshow = true;
		},
		// 关闭申请活动弹窗
		closeadd() {
			this.popupshow = false;
			this.addform = {
				title: '请选择活动标题',
				title_id: '',
				min_mum: '',
				end_time: '--',
				union_id: '',
				union: '请选择团队',
				wangwang: '',
				type: 6,
				min_server: ''
			};
		},
		//获取活动列表
		getActList() {
			// this.activityList = [];
			this.$u.api
				.getactivitylist({
					type: this.actType,
					status: 1,
					search: this.search
				})
				.then(res => {
					this.activityList = res.data;
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 获取活动标题
		getactivityinfo() {
			this.$u.api
				.getactivityinfo()
				.then(res => {
					console.log(res);
					if (res.code == 200) {
						this.selectlist = res.data;
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		//获取联盟账号接口
		getunionuser() {
			this.$u.api
				.getunionuser()
				.then(res => {
					// console.log(res);
					this.selectuserlist = res.data;
				})
				.catch(err => {
					console.log(err);
				});
		},
		actTypeChange(i) {
			this.actType = 0 == i ? 1 : 2;
			this.getActList();
		}
	}
};
</script>

<style lang="scss" scoped>
.activity {
	.popbox {
		background-color: #f7f7f7;
		.title {
			width: 100%;
			height: 98rpx;
			background-color: #ffffff;
			display: block;
			color: rgba(0, 0, 0, 0.85);
			font-size: 32rpx;
			text-align: left;
			padding: 28rpx 0 0 42rpx;
		}

		.callus::v-deep {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 22rpx;
			margin-bottom: 22rpx;
			padding: 0rpx 38rpx;
			.u-hairline-border:after {
				border: 0;
			}
			.u-input {
				height: 60rpx !important;
				border-radius: 12rpx;
				background-color: #ffffff;
			}

			.drodown {
				margin: 0 !important;
				border-width: 1px;
				border-style: solid;
				border-color: #ffffff;
			}

			.u-dropdown__content {
				// height: auto;
				margin-top: 4rpx;
			}

			.u-dropdown__menu {
				z-index: 10;
			}
		}

		.drodownbox::v-deep {
			padding: 36rpx 38rpx 0 38rpx;
			.u-hairline-border:after {
				border: 0;
			}
		}

		.popiptbox::v-deep {
			// width: 350rpx;
			margin-top: 22rpx;
			margin-bottom: 22rpx;
			padding: 0 38rpx;
			display: flex;
			justify-content: space-b;
			align-items: center;

			.u-input {
				height: 60rpx !important;
				border-radius: 12rpx;
				background-color: #ffffff;
			}
		}
		.choosetype {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.footerbtn::v-deep {
			margin-top: 32rpx;
			background-color: #ffffff;
			height: 122rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.u-btn {
				margin: 0;
			}
		}
	}
	.topheader {
		width: 100%;
		background-color: #ffd101;
		height: 266rpx;
		padding: 0 24rpx;
		.search::v-deep {
			padding-top: 15rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.u-input {
				flex: 0;
			}
			/* #ifdef MP */
			.u-input {
				width: 380rpx;
			}
			.u-input .u-input__input {
				display: block;
				padding-left: 16rpx !important;
			}
			/* #endif */
		}
		/* #ifdef MP */
		.search {
			padding-right: 192rpx;
		}
		/* #endif */
	}
	.subsectbox {
		position: relative;
		margin-top: 32rpx;
		.active {
			position: absolute;
			width: 0;
			height: 0;
			border-top: 30rpx solid transparent;
			border-bottom: 20rpx solid #f7f7f7;
			border-left: 30rpx solid transparent;
			border-right: 30rpx solid transparent;
		}
	}
	.activityul {
		position: relative;
		width: 100%;
		min-height: calc(100vh - 310rpx);
		background-color: #f7f7f7;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		/* #ifdef APP-PLUS */
		margin-top: -64rpx;
		/* #endif */
		/* #ifndef APP-PLUS */
		margin-top: -60rpx;
		/* #endif */
		padding: 22rpx;
		.activityli {
			width: 700rpx;
			height: 230rpx;
			font-size: 24rpx;
			border-radius: 16rpx;
			background-color: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			padding: 16rpx;
			// margin: 0 auto;
			margin-bottom: 26rpx;
			.act_top {
				font-weight: 600;
				padding-bottom: 30rpx;
				font-size: 30rpx;
			}
			.act_other {
				margin-bottom: 10rpx;
			}
			.actleft {
				width: 250rpx;
				height: 202rpx;
				// padding-left: 20rpx;
			}
			.actright {
				width: 400rpx;
				height: 202rpx;
				background: url(../../static/image/right_arrows2.png) no-repeat right;
				background-size: 124rpx 124rpx;
			}
		}
	}
}
</style>
